<template>
  <div class="content">
    <div class="top">
      <div class="info">
        <img :src="adminForm.avatar" mode="scaleToFill" />
        <div>
          <span>会员名称：{{adminForm.username}}</span>
          <p>会员手机号：{{adminForm.mobile}}</p>
        </div>
      </div>
      <div class="relation">
        <div v-for="(item,index) in recommendList" :key="index">
          <span>{{item.value}}</span>
          <p>{{item.label}}</p>
        </div>
      </div>
    </div>
    <div class="list">
      <div v-for="(item,index) in formList" :key="index">
        <span>{{item.label}}</span>
        <p>{{item.value}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { FIND_CUSTOMER_INFO_API_NEW } from '@/api'

export default {
  components: {},

  data () {
    return {
      customerId: '',
      data: {},
      stateList: {
        '0': '正常',
        '1': '冻结',
        '2': '禁用'
      }
    }
  },
  created () {},
  computed: {
    account () {
      return this.$cookie.get('account')
    },
    adminForm () {
      return {
        ...this.data,
        mobile: this.mobileReg(this.data.mobile)
      }
    },
    recommendList () {
      return [
        {
          label: '下级用户',
          value: this.data.recommendInfo
            ? this.data.recommendInfo.oneRecommendMemberCount
            : '0'
        },
        {
          label: '下下级用户',
          value: this.data.recommendInfo
            ? this.data.recommendInfo.twoRecommendMemberCount
            : '0'
        },
        {
          label: '下下下级用户',
          value: this.data.recommendInfo
            ? this.data.recommendInfo.threeRecommendMemberCount
            : '0'
        },
        {
          label: '下级店铺',
          value: this.data.recommendInfo
            ? this.data.recommendInfo.oneRecommendShopCount
            : '0'
        },
        {
          label: '下下级店铺',
          value: this.data.recommendInfo
            ? this.data.recommendInfo.twoRecommendShopCount
            : '0'
        },
        {
          label: '下下下级店铺',
          value: this.data.recommendInfo
            ? this.data.recommendInfo.threeRecommendShopCount
            : '0'
        }
      ]
    },
    formList () {
      return [
        {
          label: '真实姓名',
          value: this.nameReg(this.data.realName)
        },
        {
          label: '会员编号',
          value: this.data.customerId
        },
        {
          label: '状态',
          value: this.stateList[this.data.state]
        },
        {
          label: '上次登录时间',
          value: this.data.loginDate
        },
        {
          label: '积分数量',
          value: this.data.integral ? this.data.integral : 0
        },
        {
          label: '爱豆豆数量',
          value: this.data.pension ? this.data.pension : 0
        },
        {
          label: '身份证',
          value: this.idCardReg(this.data.idCard)
        },
        {
          label: '开店名称',
          value: this.data.shopName
        }
      ]
    }
  },
  onShow () {
    this.init()
    this._getVipAdminInfo()
  },
  methods: {
    _getVipAdminInfo () {
      const vm = this
      FIND_CUSTOMER_INFO_API_NEW(vm.customerId, 'SHOP')
        .then(r => {
          if (r.data.code === '0') {
            vm.data = r.data.data
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }, // 获取用户信息
    mobileReg (val) {
      if (val && val.length) {
        return val.substr(0, 3) + '****' + val.substr(7)
      } else {
        return '-'
      }
    },
    nameReg (val) {
      if (val && val.length) {
        let len = this.data.realName.length - 1
        let xin = ''
        for (let i = 0; i < len; i++) {
          xin += '*'
        }
        return val.substr(0, 1) + xin
      } else {
        return '-'
      }
    },
    idCardReg (val) {
      if (val && val.length) {
        return val.substr(0, 6) + '********' + val.substr(14)
      } else {
        return '-'
      }
    },
    init () {
      this.customerId = this.$root.$mp.query.customerId
      this.data = {}
    }
  }
}
</script>

<style lang="scss">
.content {
  background: #f2f3f5;
  .top {
    width: 100%;
    height: 220px;
    background: #739efe;
    > .info {
      width: 95%;
      height: 90px;
      margin: auto;
      display: flex;
      align-items: center;
      > img {
        width: 50px;
        height: 50px;
        border-radius: 50px;
        margin-right: 22px;
      }
      > div {
        font-size: 15px;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
    }
    > .relation {
      width: 95%;
      height: 116px;
      margin: auto;
      border-radius: 6px;
      background: #81a7fe;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      > div {
        width: 33.33%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        font-size: 13px;
        color: #fff;
        height: 45px;
        > span {
          font-weight: 600;
        }
      }
      div:nth-child(3n + 2) {
        border-right: 1px solid #93b3fe;
        border-left: 1px solid #93b3fe;
      }
      div:nth-child(n + 4) {
        margin-top: 10px;
      }
    }
  }
  .list {
    width: 100%;
    height: calc(100% - 10px - 220px);
    margin-top: 10px;
    background: #fff;
    > div {
      width: 95%;
      height: 40px;
      margin: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #f6f6f6;
      font-size: 13px;
      color: #000;
      p {
        color: #a8a8a8;
      }
    }
  }
}
</style>
